<template>
	<view class="ReflectionDetailsPage" v-if="isShow">
		<view class="header">
			<view class="Details-name">
				<text>{{inforData.reflectorTitle}}</text>
				<view class="look" @click="goto">查看模型演示</view>
			</view>

			<!-- <uv-button color="#5ebcbc" :customStyle="{'border-radius':'10rpx'}" size="mini"></uv-button> -->
			<view class="ds">
				2025-03-12 21:01:24 浏览量{{inforData.pageView}}
			</view>
			<view class="tage" v-if="reflectionZone&&reflectionZone.length">
				<template v-for="(v,i) in reflectionZone" :key="i">
					<uv-tags style="margin-bottom: 10rpx;" v-if="v" :text="v" :type="tabtypeList[i]" plain plainFill
						size="mini"></uv-tags>
				</template>
			</view>
		</view>
		<view class="Richtext-cont">
			<view v-html="inforData.description"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inforData: {},
				reflectionZone: [],
				isShow:false,
				tabtypeList: [
					'primary',
					'warning',
					'success',
					'info',
					'error',
					'primary',
					'warning',
					'success',
					'info',
					'error',
					'primary',
					'warning',
					'success',
					'info',
					'error',
				],
			}
		},
		onLoad(option) {
			//option 上个页面传递的参数。
			this.reflectorId = option.reflectorId; //上个页面传递的参数。
			uni.showLoading({
				title: '加载中'
			});
			this.getList();
		},
		methods: {
			async getList() {
				// 根据id查询反射器知识库信息
				// this.jsListDate =  muajax.getQueryReflectionId({reflectorId:1});
				const {
					data,
					code
				} = await this.muajax.getQueryReflectionId({}, {
					urlRewrite: url => `${url}/${this.reflectorId}`
				});
				uni.hideLoading()
				this.inforData = data
				if(this.inforData.reflectionZone){
					this.reflectionZone = this.inforData.reflectionZone ? this.inforData.reflectionZone.split('、') : []
				}
				this.isShow=true
			},
			goto(){
				uni.navigateTo({
					url:'/pages/3dmodel/3dmodel?reflectorId='+this.inforData.reflectorId
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.ReflectionDetailsPage {
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.Details-name {
		font-size: 36rpx;
		display: flex;
		justify-content: space-between;
	}

	.ds {
		color: #666666;
		padding-top: 20rpx;
		// padding-bottom: 20rpx;
		// border-bottom: 1px solid #f1f1f1;

	}

	.Richtext-cont {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.header {
		border-bottom: 1px solid #f1f1f1;
		padding-bottom: 20rpx;
	}

	.tage {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	::v-deep .uv-tags {
		margin-bottom: 10rpx;
	}

	.look {
		background: #5ebcbc;
		padding: 10rpx;
		color: #fff;
		// position: absolute;
		// right: 30rpx;
		display: inline-block;
		// top: 30rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		// width: 100rpx;

	}
</style>